<template>
  <!-- 到货验收 -->
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="filter"
        @search="search"
        :isShow="isShow"
        @resetForm="resetForm"
      >
        <!-- tab切换 -->
        <div class="ccui-tab-wrapper">
          <el-button type="table-top-active" size="mini"
            >到货验收({{ page.total }})</el-button
          >
        </div>
        <!-- 单行搜索 -->
        <template slot="search">
          <el-input
            v-model="filter.acceptanceName"
            clearable
            searchLabel="验收单名称"
            placeholder="请输入验收单名称模糊查询"
            @blur="handleTrim('acceptanceName')"
          ></el-input>
          <el-input
            v-model="filter.categoryName"
            clearable
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('categoryName')"
          ></el-input>
          <el-input
            v-model="filter.contractNumber"
            clearable
            searchLabel="合同编号"
            placeholder="请输入合同编号模糊查询"
            @blur="handleTrim('categoryName')"
          ></el-input>
          <el-input
            v-model="filter.acceptanceNumber"
            clearable
            searchLabel="验收单编号"
            placeholder="请输入验收编号模糊查询"
          ></el-input>
          <el-input
            v-model="filter.orderNumber"
            clearable
            searchLabel="订单编号"
            placeholder="请输入订单编号模糊查询"
          ></el-input>
          <el-input
            v-model="filter.acceptor"
            searchLabel="验收人"
            clearable
            placeholder="请输入验收人模糊查询"
          ></el-input>
          <el-input
            v-model="filter.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="输入填报单位模糊查询"
            @blur="handleTrim('reportInOrgName')"
          ></el-input>

          <el-select
            v-model="filter.acceptanceTypeCode"
            searchLabel="验收类型"
            placeholder="请选择验收类型查询"
          >
            <el-option label="按发货单验收" value="按发货单验收"> </el-option>
            <el-option label="按订单验收" value="按订单验收"> </el-option>
            <el-option label="按合同验收" value="按合同验收"> </el-option>
          </el-select>

          <el-select
            v-model="filter.submitStatus"
            searchLabel="状态"
            placeholder="请选择状态查询"
          >
            <el-option label="待提交" value="待提交"> </el-option>
            <el-option label="已提交" value="已提交"> </el-option>
          </el-select>
          <el-input
            v-model="filter.supplier"
            clearable
            searchLabel="供应商名称"
            @blur="handleTrim('supplier')"
            placeholder="请输入供应商名称模糊查询"
          ></el-input>
        </template>
        <!-- 展开后多个搜索 -->
        <el-input
          v-model="filter.acceptanceName"
          clearable
          slot="searchItem41"
          searchLabel="验收单名称"
          placeholder="请输入验收单名称模糊查询"
        ></el-input>
        <el-input
          v-model="filter.categoryName"
          clearable
          slot="searchItem4"
          searchLabel="分类名称"
          placeholder="请输入分类名称模糊查询"
          @blur="handleTrim('categoryName')"
        ></el-input>
        <el-input
          v-model="filter.contractNumber"
          clearable
          slot="searchItem92"
          searchLabel="合同编号"
          placeholder="请输入合同编号模糊查询"
          @blur="handleTrim('categoryName')"
        ></el-input>
        <el-input
          v-model="filter.acceptanceNumber"
          clearable
          slot="searchItem1"
          searchLabel="验收单编号"
          placeholder="请输入验收单编号模糊查询"
        ></el-input>
        <el-input
          v-model="filter.orderNumber"
          searchLabel="订单编号"
          clearable
          slot="searchItem2"
          placeholder="请输入订单编号模糊查询"
        ></el-input>
        <el-input
          v-model="filter.reportInOrgName"
          clearable
          slot="searchItem3"
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
        ></el-input>
        <el-input
          v-model="filter.acceptor"
          clearable
          slot="searchItem88"
          searchLabel="验收人"
          placeholder="请输入验收人模糊查询"
        ></el-input>
        <el-input
          v-model="filter.supplier"
          clearable
          slot="searchItem89"
          searchLabel="供应商名称"
          @blur="handleTrim('supplier')"
          placeholder="请输入供应商模糊查询"
        ></el-input>

        <el-select
          v-model="filter.acceptanceTypeCode"
          slot="searchItem5"
          searchLabel="验收类型"
          placeholder="请选择验收类型查询"
        >
          <el-option label="按发货单验收" value="按发货单验收"> </el-option>
          <el-option label="按订单验收" value="按订单验收"> </el-option>
          <el-option label="按合同验收" value="按合同验收"> </el-option>
        </el-select>

        <el-select
          slot="searchItem6"
          v-model="filter.submitStatus"
          searchLabel="状态"
          placeholder="请选择状态查询"
        >
          <!-- 0 未提交  1已提交 -->
          <el-option label="待提交" value="待提交"> </el-option>
          <el-option label="已提交" value="已提交"> </el-option>
        </el-select>
        <div class="ccui-extend-btn">
          <!-- <check-methold /> -->
          <el-button
            type="primary"
            icon="icon-ccui-add-sup"
            @click="deliveryvisabled = true"
            >新增</el-button
          >
        </div>
      </el-search>
    </div>

    <!-- 表格 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
        @cell-click="view"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
            :formatter="table.formatter"
          ></el-table-column>
        </template>

        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleEdit(scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              :disabled="scope.row.submitStatus === 1"
              @click.native.prevent="handleDelete(scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="table-footer">
        <div class="ccui-table-footer">
          <div id="ccui-paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              popper-class="ccui-paging-page-size-popper"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单选择弹框 -->
    <order-check
      v-if="ordervisabled"
      @dingdanOtherDialog="otherDialog"
      :ordervisabled.sync="ordervisabled"
    ></order-check>
    <!-- 发货选择弹框 -->
    <delivery-check
      v-if="deliveryvisabled"
      @fahuoOtherDialog="otherDialog"
      :deliveryvisabled.sync="deliveryvisabled"
    ></delivery-check>
    <!-- 合同选择弹框 -->
    <contract-check
      v-if="contractvsabled"
      @hetongOtherDialog="otherDialog"
      :contractvsabled.sync="contractvsabled"
    ></contract-check>
  </div>
</template>

<script>
import orderCheck from "./order-add/order-check.vue";
import contractCheck from "./contract-add/contract-check.vue";
import deliveryCheck from "./delivery-add/delivery-check.vue";
import { addUrlPerFix, formatNumber } from "@/basa/utils";

import {
  listPageAcceptanceCert,
  getUserInfo,
  removeAcceptanceCert
} from "../../api/index";
export default {
  name: "arrival-check-list",
  data() {
    return {
      loading: false,
      ordervisabled: false, // 按订单验收弹框
      deliveryvisabled: false, // 按发货单验收弹框
      contractvsabled: false, // 按合同发货单验收弹框
      isShow: false, // 搜索展开收起控制
      filter: {}, // 搜索集合
      searchValue: {},
      isFocus: 1, // 默认选中tab
      dialogVisible: false, // 选择弹框显隐
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      tableColumnData: [
        {
          label: "序号",
          type: "index",
          fixed: true
        },
        {
          label: "验收单编号",
          prop: "acceptanceNumber",
          fixed: true,
          width: 200
        },
        {
          label: "验收单名称",
          prop: "acceptanceName",
          width: 250
        },
        { label: "订单编号", prop: "orderNumber", width: 150 },
        { label: "合同编号", prop: "contractNumber", width: 150 },
        { label: "供应商名称", prop: "supplier", width: 300 },
        { label: "验收人", prop: "acceptor", width: 150 },
        { label: "分类名称", prop: "categoryName", width: 250 },
        {
          label: "验收数量",
          prop: "acceptanceCurrentNumber",
          formatter: this.numFormatter
        },
        { label: "填报单位", prop: "reportInOrgName", width: 300 },
        { label: "验收类型", prop: "acceptanceType", width: 120 },
        {
          label: "状态",
          prop: "submitStatus",
          formatter: this.conmitFormatter,
          width: 120
        }
      ]
    };
  },
  activated() {
    // this.getList();
    this.search(this.filter);
  },
  deactivated() {
    this.$refs.search.resetForm();
  },

  created() {
    // this.getList();
    this.getUserInfo();
  },
  components: {
    orderCheck,
    contractCheck,
    deliveryCheck
  },
  methods: {
    // 表格多选
    handleSelectionChange(row) {},
    // 获取用户名
    getUserInfo() {
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        const { userInfo } = res.data.data;
        localStorage.setItem("curentUserName", userInfo.name);
        localStorage.setItem("curentUserPhone", userInfo.mobile);
      });
    },
    // 根据选择弹框返回数据跳转到对应弹框
    otherDialog(opt) {
      switch (opt.name) {
        case "deliveryvisabled":
          this.deliveryvisabled = true;
          break;
        case "contractvsabled":
          this.contractvsabled = true;
          break;
        case "ordervisabled":
          this.ordervisabled = true;
          break;
      }
    },
    // 获取列表数据
    getList() {
      let obj = { ...this.searchValue };
      switch (obj.acceptanceTypeCode) {
        case "按发货单验收":
          obj.acceptanceTypeCode = "1";
          break;
        case "按订单验收":
          obj.acceptanceTypeCode = "2";
          break;
        case "按合同验收":
          obj.acceptanceTypeCode = "3";
          break;
      }

      // 0 待提交  1已提交
      obj.submitStatus = obj.submitStatus
        ? obj.submitStatus === "待提交"
          ? 0
          : 1
        : "";
      this.loading = true;
      listPageAcceptanceCert({ ...this.page, ...obj, businessType: "1" })
        .then(res => {
          const { rows, recordsTotal } = res.data.data;
          this.tableData = rows;
          this.page.total = recordsTotal;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },
    // 查看
    view(row, column) {
      if (column.label === "验收单编号") {
        switch (row.acceptanceType) {
          case "按订单验收":
            this.$router.push({
              path: "/checkManagement/manage/order-add",
              query: { status: "查看", id: row.id }
            });
            break;
          case "按合同验收":
            this.$router.push({
              path: "/checkManagement/manage/contract-add",
              query: { status: "查看", id: row.id }
            });
            break;
          case "按发货单验收":
            this.$router.push({
              path: "/checkManagement/manage/delivery-add",
              query: { status: "查看", id: row.id }
            });
            break;
          case "按发货单":
            this.$router.push({
              path: "/checkManagement/manage/delivery-add",
              query: { status: "查看", id: row.id }
            });
            break;
        }
        localStorage.setItem("ysdname", row.acceptanceName);
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == "验收单编号") {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },
    // 表格编辑
    handleEdit(row) {
      switch (row.acceptanceType) {
        case "按订单验收":
          this.$router.push({
            path: "/checkManagement/manage/order-add",
            query: {
              status: "编辑",
              htCode: row.contractNumber,
              contractId: row.contractId,
              id: row.id
            }
          });
          break;
        case "按合同验收":
          this.$router.push({
            path: "/checkManagement/manage/contract-add",
            query: {
              status: "编辑",
              htCode: row.contractNumber,
              contractId: row.contractId,
              id: row.id
            }
          });
          break;
        case "按发货单验收":
          this.$router.push({
            path: "/checkManagement/manage/delivery-add",
            query: {
              status: "编辑",
              htCode: row.contractNumber,
              contractId: row.contractId,
              id: row.id
            }
          });
          break;
      }
      localStorage.setItem("ysdname", row.acceptanceName);
    },
    // 表格删除
    handleDelete(row) {
      this.$confirm("确定删除么")
        .then(_ => {
          // 调用删除接口
          removeAcceptanceCert({ id: row.id }).then(res => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(_ => {});
    },
    // 搜索回调
    search(searchVal) {
      this.searchValue = JSON.parse(JSON.stringify(searchVal));
      this.page.pageNo = 1;
      this.getList();
    },
    // 重置回调
    resetForm() {
      this.filter = {};
    },

    //  展示条数
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.getList();
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    numFormatter(row) {
      return formatNumber(row.acceptanceCurrentNumber, 3);
    },
    conmitFormatter(row) {
      return row.submitStatus === 0 ? "未提交" : "已提交";
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.ccui-multifunctional-table-wrapper {
  height: 100%;
}
</style>
